import React, { useState } from 'react';
import { Menu } from 'antd';
import { HeartOutlined } from '@ant-design/icons';
import { Link ,Redirect} from 'react-router-dom';
import menuInfo from './route';
import './index.css'
const { SubMenu } = Menu;

function LeftMenu(props) {
    // console.log(props);
    const [selMenuPath, setSelMenuPath] = useState(props.path);
    // const history = useHistory();

    const rootSubmenuKeys = ['0', '1', '2'];
    const [openKeys, setOpenKeys] = React.useState([0]);

    const onOpenChange = keys => {
        const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };
    const selMenu = (ev) => {
        setSelMenuPath(ev.key)
    }

    return (
        <div className="left">
            <Menu
                defaultOpenKeys={['sub1']}
                // defaultSelectedKeys={selMenuPath}
                // openKeys="[sub1]"
                theme="dark"
                onOpenChange={onOpenChange}
                onClick={selMenu}
                // openKeys={openKeys}
                mode="inline"
                selectedKeys={selMenuPath}
                style={{ height: '100%', borderRight: 0 }}
            >
                <SubMenu key="sub1" icon={<HeartOutlined />} title="健康管理" >
                    {
                        menuInfo.map(v => {
                            return (
                                <Menu.Item key={v.menuUrl}>
                                    <Link key={v.menuUrl} to={v.menuUrl}>{v.menuName}</Link>
                                </Menu.Item> 
                            )
                        })
                    }
                    
                </SubMenu>
            </Menu>
        </div>

    )
}
export default LeftMenu
